<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>book展示</title>
    <!--1、Jquery组件引用-->
    <script src="/js/jquery.min63b9.js?v=2.1.4"></script>

    <!--2.bootstrap组件引用-->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/bootstrap.min14ed.js?v=3.3.6"></script>

    <!--3、bootstrap table组件以及中文包的引用-->
    <link rel="stylesheet" href="dist/bootstrap-table.css">
    <script src="dist/bootstrap-table.js"></script>
    <script src="dist/locale/bootstrap-table-zh-CN.js"></script>
    <script src="dist/extensions/export/bootstrap-table-export.js"></script>
    <script src="dist/tableExport.js"></script>


    <link rel="stylesheet" href="bootstrap-datetimepicker/css/bootstrap-datetimepicker.css">
    <script src="bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>
    <script src="bootstrap-datetimepicker/css/locales/bootstrap-datetimepicker.zh-CN.js"></script>


</head>
<style>
    body{
        font-family: "Microsoft YaHei", 微软雅黑, sans-serif;
        font-size: 14px;
        margin:0;padding:0;
    }
    .table_break{
        word-break:break-all;
    }
    #toolbar input{
        min-width: 50px;
        height: 30px;
    }
    /*.table td{*/
        /*width:14% ;*/
    /*}*/

</style>
<body>
<div class="container-fluid" id="toolbar">
    <div class="row-fluid">

        <div class="span4">
            <form class="form-horizontal">
                <div class="control-group">
                    <label class="control-label" >书名:</label>
                    <div class="controls">
                        <input type="text" name="bookName" id="bookName" placeholder="">
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" >主编:</label>
                    <div class="controls">
                        <input type="text" name="bookEditor" id="bookEditor" placeholder="">
                    </div>
                </div>

                <div class="control-group">
                    <label class="control-label" >出版社:</label>
                    <div class="controls">
                        <input type="text" name="press" id="press" placeholder="">
                    </div>
                </div>


            </form>
        </div>
        <div class="span4">
            <form class="form-horizontal">

                <div class="control-group">
                    <label class="control-label" >价钱:</label>
                    <div class="controls">
                        <input type="text" name="price" id="price" placeholder="">
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" >内容介绍:</label>
                    <div class="controls">
                        <input type="text" name="contentIntroduction" id="contentIntroduction" placeholder="">
                    </div>
                </div>
            </form>
        </div>
        <div class="span4">
            <form class="form-horizontal">
                <div class="control-group">
                    <label class="control-label" >作者简介:</label>
                    <div class="controls">
                        <input type="text" name="authorAbout" id="authorAbout" placeholder="">
                    </div>
                </div>

                <div class="control-group">
                    <label class="control-label" >目录:</label>
                    <div class="controls">
                        <input type="text" name="outline" id="outline" placeholder="">
                    </div>
                </div>


                <div class="control-group">
                    <div class="controls">
                        <button class="btn" type="button" id="crete_button" onclick="window.location.href='/create'">新建</button>
                        <button class="btn" type="button" id="query_button" onclick="doQuery()">查询</button>
                        <button class="btn" type="button" id="clean_button" onclick="doClean()">清空</button>
                    </div>
                </div>
            </form>
        </div>

    </div>
</div>



<table id="table" class="table_break"></table>
</body>
<script>
    selections = [];
    var $table = $('#table');
    $(function () {
        $table.bootstrapTable({
            striped: true,                  ////是否显示行间隔色
            sortName: "updateTimeLong",                   //默认排序列
            sortOrder: "desc",              ////排序方式
            pagination: true,               //是否显示分页（*）
            pageList: "[10, 25, 50, 100, 500]",         //可供选择的每页的行数（*）
            pageSize: 10,                   //每页的记录行数（*）
            detailView: true,               //是否显示父子表
            sidePagination: "server",       //分页方式：client客户端分页，server服务端分页（*）
            searchOnEnterKey: true,         //使用回车进行查询
            showColumns: true,              //是否显示所有的列
            showExport: true,                   //导出按钮
            detailFormatter: detailFormatterFunction,       //查看详细列表演示
            queryParams: queryParams,           //传递参数（*）
            url: '/books/queryByParams',
            selectItemName:"checkbox",              //选中框的name
            clickToSelect:true,                     //选中表格中的一行,checkbox默认选中
            checkboxHeader:true,                    //表头的全选
            columns: [{
                field: 'id',
                title: 'id',
                sortable: true
            }, {
                field: 'bookName',
                title: '书名',
                sortable: true
            },{
                field: 'bookEditor',
                title: '主编',
                sortable: true
            },{
                field: 'press',
                title: '出版社',
                sortable: true
            }, {
                field: 'price',
                title: '价钱',
                sortable: true
            }, {
                field: 'authorAbout',
                title: '作者简介',
                sortable: true
            }, {
                field: 'outline',
                title: '目录',
                sortable: true
            }, {
                field: 'updateTimeLong',
                title: '更新时间',
                sortable: true,
                formatter:longToDate
            },{
                field: 'operate',
                title: '操作',
                align: 'center',
                formatter: operateFormatter
            }]
        });
    });


    function doQuery(){
        $table.bootstrapTable('refresh', {url: '/books/queryByParams'});
    }

    function detailFormatterFunction(index, row){
        /*var html = [];
        $.each(row, function (key, value) {
            html.push('<p><b>' + key + ':</b> ' + value + '</p>');

        });
        return html.join('');*/
        return window.location.href='/create'
    }


    function doClean(){
        $('#bookName').val("");
        $('#bookEditor').val("");
        $('#press').val("");
        $('#price').val("");
//        $('#time_local_start').val("");
//        $('#time_local_end').val("");
        $('#authorAbout').val("");
        $('#outline').val("");
        $('#contentIntroduction').val("");
        doQuery();
    }

    function queryParams(params) {
        var ids = getIdSelections();
//        alert(ids);
        if (params.search != undefined) {
            return "limit=" + params.limit + "&offset=" + params.offset + "&sort=" + params.sort + "&order=" + params.order
                + "&bookName=" + $('#bookName').val()
                + "&bookEditor=" + $('#bookEditor').val()
                + "&press=" + $('#press').val()
                + "&price=" + $('#price').val()
//                + "&time_local_start=" + $('#time_local_start').val()
//                + "&time_local_end=" + $('#time_local_end').val()
                + "&authorAbout=" + $('#authorAbout').val()
                + "&outline=" + $('#outline').val()
                + "&contentIntroduction=" + $('#contentIntroduction').val()
                + "&ids=" + ids
                + "&search=" + params.search;
        } else {
            return "limit=" + params.limit + "&offset=" + params.offset + "&sort=" + params.sort + "&order=" + params.order
                + "&bookName=" + $('#bookName').val()
                + "&bookEditor=" + $('#bookEditor').val()
                + "&press=" + $('#press').val()
                + "&price=" + $('#price').val()
//                + "&time_local_start=" + $('#time_local_start').val()
//                + "&time_local_end=" + $('#time_local_end').val()
                + "&authorAbout=" + $('#authorAbout').val()
                + "&outline=" + $('#outline').val()
                + "&contentIntroduction=" + $('#contentIntroduction').val()
                + "&ids=" + ids

        }

    }

    function lengthFormater(value, row, index){
        if(value !="" && value != null){
            if(value.length>=50){
                return value.substr(0,50)
            }else{
                return value
            }
        }else{
            return "-"
        }

    }

    //checkbox事件
    $table.on('check.bs.table uncheck.bs.table ' +
        'check-all.bs.table uncheck-all.bs.table', function () {
//        $remove.prop('disabled', !$table.bootstrapTable('getSelections').length);

        // save your data, here just save the current page
        selections = getIdSelections();
        // push or splice the selections if you want to save all data selections
    });
//    $table.on('expand-row.bs.table', function (e, index, row, $detail) {
//        if (index % 2 == 1) {
//            $detail.html('Loading from ajax request...');
//            $.get('LICENSE', function (res) {
//                $detail.html(res.replace(/\n/g, '<br>'));
//            });
//        }
//    });
//    $table.on('all.bs.table', function (e, name, args) {
//        console.log(name, args);
//    });
    function getIdSelections() {
        return $.map($table.bootstrapTable('getSelections'), function (row) {
            return row.id
        });
    }



    String.format = function() {
        if (arguments.length == 0)
            return null;
        var str = arguments[0];
        for ( var i = 1; i < arguments.length; i++) {
            var re = new RegExp('\\{' + (i - 1) + '\\}', 'gm');
            str = str.replace(re, arguments[i]);
        }
        return str;
    };

    document.onkeydown = function (e) {
        var theEvent = window.event || e;
        var code = theEvent.keyCode || theEvent.which;
        if (code == 13) {
            $("#query_button").click();
        }
    }

    function longToDate(value, row, index){
//        alert(value);
        if(value == null){
            return "";
        }else{
            return new Date(parseInt(value,10)).format("yyyy-MM-dd hh:mm:ss");
        }
    }


//    function tvIsTvodFormatter(value, row, index){
//
//    }

    //操作
    function operateFormatter(value, row, index) {
//        return row.title()
//        return "<div></div><a href=\"/create?type=show&id="+row.id +">查看</a></div>"
//        return row.id;
//        return '<div id="a"></div><button class="btn" type="button" onclick="window.location.href=\'/create?type=show&id='+row.id+'\'>查看</button></div>';
        /*var divbegin = String.format('<div id="qiyongjuji{0}">', row.id)
        if(row.isEffective == 0){
            return [
                divbegin,
                String.format('<input type="button" value="启用剧集" onclick="enabledOrDisabledVideo(\'{0}\',1,{1})" class="btn btn-primary" />', row.id,${syncAlbumInstance.convergeId}),
                '</div>'
            ].join('');
        }else if(row.isEffective == 1){
            return [
                divbegin,
                String.format('<input type="button" value="禁用剧集" onclick="enabledOrDisabledVideo(\'{0}\',0,{1})" class="btn btn-danger" />', row.id,${syncAlbumInstance.convergeId}),
                '</div>'
            ].join('');


        }*/
//        return [
////            '<button class="btn" type="button" id="crete_button" onclick="window.location.href=\'/create?type=show&id='+row.id+'\'>新建</button>'
//            "<div></div><a href=\"/create?type=show&id="+row.id +">查看</a></div>"
//            ].join('');
    }



    //扩展Date的format方法
    Date.prototype.format = function (format) {
        var o = {
            "M+": this.getMonth() + 1,
            "d+": this.getDate(),
            "h+": this.getHours(),
            "m+": this.getMinutes(),
            "s+": this.getSeconds(),
            "q+": Math.floor((this.getMonth() + 3) / 3),
            "S": this.getMilliseconds()
        }
        if (/(y+)/.test(format)) {
            format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        }
        for (var k in o) {
            if (new RegExp("(" + k + ")").test(format)) {
                format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
            }
        }
        return format;
    }

</script>
<script type="text/javascript">
    $.fn.datetimepicker.dates['zh'] = {
        days:       ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六","星期日"],
        daysShort:  ["日", "一", "二", "三", "四", "五", "六","日"],
        daysMin:    ["日", "一", "二", "三", "四", "五", "六","日"],
        months:     ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月","十二月"],
        monthsShort:  ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二"],
        meridiem:    ["上午", "下午"],
        //suffix:      ["st", "nd", "rd", "th"],
        today:       "今天"
    };
    $(".form_datetime").datetimepicker({
        language:  'zh',
        format: "yyyy-mm-dd hh:ii",
        autoclose: true,
        todayBtn: true,
//        startDate: "2013-02-14 10:00",
        minuteStep: 10
    });
</script>
</html>